<template>
  <div class="register">
    <van-nav-bar
      right-text="取消"
      @click-right="onClickRight"
    />
    <div class="login-wrapp">
      <div class="login-logo">
        <img src="./images/logo-index.png" alt="">
        <van-divider class="textDivider">
          工程建设项目法规汇编
        </van-divider>
      </div>
      <div class="login-form">
        <div class="login-form-top">
          <van-form @submit="onSubmit">
            <van-field
              v-model="userName"
              :rules="[{ required: true, validator: patternUserName, message: '请填写用户名', trigger: 'onChange' }]"
              name="userName"
              label="用户名"
              placeholder="请填写用户名"
              clearable
              right-icon="warning-o"
              @click-right-icon="userNameInfo"
            />
            <van-field
              v-model="userPassword"
              :rules="[{ required: true, validator: patternUserPassword, message: '请填写密码', trigger: 'onChange' }]"
              type="password"
              name="userPassword"
              label="密码"
              placeholder="请填写密码"
              clearable
              right-icon="warning-o"
              @click-right-icon="userPasswordInfo"
            />
            <van-field
              v-model="realName"
              :rules="[{ required: true, validator: patternRealName, message: '请填写真实姓名', trigger: 'onChange' }]"
              name="realName"
              label="姓名"
              placeholder="请填写真实姓名"
              clearable
            />
            <van-field
              v-model="userPhone"
              :rules="[{ required: true, validator: patternUserPhone, message: '请填写正确手机号', trigger: 'onChange' }]"
              name="userPhone"
              label="手机号"
              placeholder="请填写手机号"
              clearable
              type="tel"
            />
            <van-field
              v-model="userEmail"
              :rules="[{ required: true, validator: patternUserEmail, message: '请填写正确邮箱', trigger: 'onChange' }]"
              name="userPhone"
              label="邮箱"
              placeholder="请填写邮箱"
              clearable
            />
            <div style="margin: 16px;">
              <van-button round block type="info" native-type="submit">注册</van-button>
            </div>
            <div style="margin: 32px 16px 16px 16px;">
              <van-button round block type="info" @click="jump">已有账号？去登陆</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
    <CustomDialog :show="show" :title="title" :message="message" @handleCancel="handleCancel"/>
  </div>
</template>
<script>

import Header from '../../components/Header/NoLeftArrowHeader'
import CustomDialog from '../../components/CustomDialog/CustomDialog'

import { Toast } from 'vant'

import { realNameReg, phoneReg, emailReg, userNameReg, pwdReg } from '../../utils/validation_rule'

import { userAddUser } from '@/api/user'

import JsMd5 from './../../utils/js-md5'

export default {
  name: 'Register',
  components: {
    Header,
    CustomDialog
  },
  data() {
    return {
      userName: '', // admin
      userPassword: '', // 123456789
      userType: 'user', // user
      realName: '', // 程登峰
      userPhone: '', // 13327571240
      userEmail: '', // 737255825@qq.com
      show: false,
      title: '',
      message: ''
    }
  },
  methods: {
    onClickRight() {
      this.$router.push('/login')
    },
    patternUserName(val) {
      return userNameReg(val)
    },
    patternUserPassword(val) {
      return pwdReg(val)
    },
    patternRealName(val) {
      return realNameReg(val)
    },
    patternUserPhone(val) {
      return phoneReg(val)
    },
    patternUserEmail(val) {
      return emailReg(val)
    },
    jump() {
      this.$router.push('login')
    },
    userPasswordInfo() {
      this.title = '密码组成规则'
      this.message = '密码必须由英文、数字或字符组成，最少6位，最多18位'
      this.show = true
    },
    userNameInfo() {
      this.title = '用户名组成规则'
      this.message = '1、数字、小写字母和下划线组成\n' +
        '\n' +
        '2、长度：6到12位'
      this.show = true
    },
    handleCancel(event) {
      this.show = event
    },
    async onSubmit() {
      const { userName, userPassword, userType, realName, userPhone, userEmail } = this.$data
      const { code, msg } = await userAddUser({ userName, userPassword: JsMd5.encryption(userPassword), userType, realName, userPhone, userEmail })
      if (code === 0) {
        Toast('注册成功')
        this.$router.replace('/login')
      } else {
        Toast(msg)
      }
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
.register {
  height: 100%;
  background-color: #70A0EC;

  .van-nav-bar {
    background-color: #70A0EC;

    /deep/ .van-nav-bar__right {
      .van-nav-bar__text {
        color: #FFFFFF;
      }
    }

    &:after {
      border-bottom-width: 0;
    }
  }

  .login-wrapp {
    position: fixed;
    top: 46px;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #70A0EC;

    .login-logo {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      height: 86px;
      padding: 12px 0;

      img {
        width: 250px;
        height: 50px;
      }

      .textDivider {
        color: #ffffff;
        border-color: #ffffff;
        padding: 0 16px;
        font-weight: bold
      }
    }

    .login-form {
      margin: 30px;
      box-sizing: border-box;
      background-color: #ffffff;

      .login-form-top {
        padding: 20px;
        box-sizing: border-box;

        /deep/ .van-cell__title {
          width: 50px;
        }
      }
    }
  }
}
</style>
